<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>举报页面</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" href="./css/pullToRefresh.css"/>
    <script src="./js/iscroll.js"></script>
    <script src="./js/pullToRefresh.js"></script>
    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<style type="text/css" media="all">
    body, html {
        padding: 0;
        margin: 0;
        height: 100%;
        font-family: Arial, Helvetica, sans-serif;
    }

    #wrapper ul li {
        text-align: ;
    }
</style>
<body>
<h3 style="text-align: center;color: #545353;margin-top: 30px;">河道隐患举报记录</h3>
<hr>
<div id="wrapper">

    <ul>

    </ul>
</div>
</div>
<script>
    //打开页面获取15条数据
    $(document).ready(function () {
        function init_get() {
            var el, li, i, a,span;
            el = document.querySelector("#wrapper ul");
            el.innerHTML = '';
            $.ajax({
                url: 'http://' + "<?php echo $_SERVER['HTTP_HOST']?>" + '/weixin/dataHandel.php?river_id=4&fun=getList',
                type: 'get',
                dataType: "json",
                success: function (data) {
                    var list = data.list;
                    for (i = 0; i < list.length; i++) {
                        li = document.createElement('li');
                        a = document.createElement('a');
                        span = document.createElement('span');
                        li.appendChild(a);
                        a.setAttribute('style','text-decoration:none;');
                        li.appendChild(span);
                        span.setAttribute('style','float:right');
                        a.setAttribute('href','http://' + "<?php echo $_SERVER['HTTP_HOST']?>" + '/weixin/listInfo.php?id='+list[i].id);
                        a.appendChild(document.createTextNode(list[i].title));
                        span.appendChild(document.createTextNode(list[i].create_time));
                        el.insertBefore(li, el.childNodes[i]);
                    }
                    request_time = data.request_time
                }
            });
        }
        init_get();
    });
    refresher.init({
        id: "wrapper",
        pullDownAction: Refresh,
        pullUpAction: Load
    });

    var page_num = 2, request_time;

    function getLocalTime(nS) {
        return new Date(parseInt(nS) * 1000).toLocaleString().replace(/年|月/g, "-").replace(/日/g, " ");
    }

    //下拉加载
    function Refresh() {
        $('.pullDownLabel').html('刷新时间:' + getLocalTime(request_time));
        //setTimeout(function () {	// <-- Simulate network congestion, remove setTimeout from production!
        //    var el, li, i;
        //    el = document.querySelector("#wrapper ul");
        //    el.innerHTML = '';
        //    $.ajax({
        //        url: 'http://' + "<?php //echo $_SERVER['HTTP_HOST']?>//" + '/weixin/dataHandel.php?river_id=4&fun=upScroll&request_time=' + request_time,
        //        type: 'get',
        //        dataType: "json",
        //        success: function (data) {
        //            var list = data.list;
        //            if (data.list.length == 0) {
        //                var el, li, i;
        //                el = document.querySelector("#wrapper ul");
        //                el.innerHTML = '';
        //                $.ajax({
        //                    url: 'http://' + "<?php //echo $_SERVER['HTTP_HOST']?>//" + '/weixin/dataHandel.php?river_id=4&fun=getList',
        //                    type: 'get',
        //                    dataType: "json",
        //                    success: function (data) {
        //                        var list = data.list;
        //                        for (i = 0; i < list.length; i++) {
        //                            li = document.createElement('li');
        //                            a = document.createElement('a');
        //                            span = document.createElement('span');
        //                            li.appendChild(a);
        //                            a.setAttribute('style','text-decoration:none;');
        //                            li.appendChild(span);
        //                            span.setAttribute('style','float:right');
        //                            a.setAttribute('href','http://' + "<?php //echo $_SERVER['HTTP_HOST']?>//" + '/weixin/listInfo.php?id='+list[i].id);
        //                            a.appendChild(document.createTextNode(list[i].title));
        //                            span.appendChild(document.createTextNode(list[i].create_time));
        //                            el.insertBefore(li, el.childNodes[0]);
        //                        }
        //                        request_time = data.request_time
        //                    }
        //                });
        //            }
        //
        //            for (i = 0; i < list.length; i++) {
        //                // console.log(list[i]);
        //                li = document.createElement('li');
        //                li.appendChild(document.createTextNode(list[i].title));
        //                el.insertBefore(li, el.childNodes[0]);
        //            }
        //            request_time = data.request_time
        //        }
        //    });
        //
        //
        //    myScroll.refresh();
        //    /****刷新IScroll****/
        //}, 1000);
        window.location.reload();
    }

    //上拉加载
    function Load() {
        setTimeout(function () {// <-- Simulate network congestion, remove setTimeout from production!
            var el, li, i, a;
            // el = $("#wrapper ul li:last");
            el = document.querySelector("#wrapper ul");
            console.log(el.childElementCount);
            $.ajax({
                url: 'http://' + "<?php echo $_SERVER['HTTP_HOST']?>" + '/weixin/dataHandel.php?river_id=4&fun=downScroll&page=' + page_num,
                type: "get",
                dataType: 'json',
                processData: false,
                contentType: false,
                success: function (data) {
                    // console.log(list);
                    var list = data.list;
                    if (list.length < 1) {
                        $('.pullUpLabel').html("已经没有更多了...");
                        return;
                    }
                    for (i = 0; i < list.length; i++) {
                        // // console.log(list[i]);
                        // li = document.createElement('li');
                        // a = li.createElement('a');
                        // li.appendChild(document.createTextNode(list[i].title));
                        // // console.log(li);
                        // el.before(li);
                        li = document.createElement('li');
                        a = document.createElement('a');
                        span = document.createElement('span');
                        li.appendChild(a);
                        a.setAttribute('style','text-decoration:none;');
                        li.appendChild(span);
                        span.setAttribute('style','float:right');
                        a.setAttribute('href','http://' + "<?php echo $_SERVER['HTTP_HOST']?>" + '/weixin/listInfo.php?id='+list[i].id);
                        a.appendChild(document.createTextNode(list[i].title));
                        span.appendChild(document.createTextNode(list[i].create_time));
                        el.insertBefore(li, el.childNodes[el.childElementCount]);
                    }
                    page_num = ++page_num;
                    request_time = data.request_time
                }
            });

            myScroll.refresh();
            /****刷新IScroll****/
        }, 1000);
    }
</script>
</body>
</html>
